<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>线上课堂</title>
    <!-- css 文件 -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <!-- jQuery 库 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- JavaScript 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
    <!-- modernizr.js 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

</head>
<body>

    <style>        
        .shipinitem{padding:15px;width:33.3%;display: inline-block;}
        .shipinview{max-width: 1260px;font-size: 0;}
        .shipitview{background:#fff;padding:20px;}
        .shipinimg{position:relative;width:100%;height:214px;background:#999;}
        .shipinimg .iconfont{font-size:50px;color:#fff;position:absolute;top:50%;left:50%; transform: translate(-50%, -50%);}
        .shipitview h4{font-size:16px;color:#333;margin:0;font-weight: bold;}
        .shipitview p{font-size:12px;color:#777;margin:45px 0 0 0;}
        .shipitview span{padding-left:10px;}
    </style>
    <div class="nrheadtablink">
        <a href="" class="active">素描课</a>
        <a href="">色彩课</a>
        <a href="">速写课</a>
    </div>
    <div class="row shipinview">
        <a href="" class="shipinitem">
            <div class="shipinimg"><img src="" width="100%" alt=""><i class="iconfont icon-bofang"></i></div>
            <div class="shipitview">
                <h4>女青年照片头像写生</h4>
                <p>视频时长<span>10:20</span></p>
            </div>
        </a>
        <a href="" class="shipinitem">
            <div class="shipinimg"><img src="" width="100%" alt=""><i class="iconfont icon-bofang"></i></div>
            <div class="shipitview">
                <h4>女青年照片头像写生</h4>
                <p>视频时长<span>10:20</span></p>
            </div>
        </a>
        <a href="" class="shipinitem">
            <div class="shipinimg"><img src="" width="100%" alt=""><i class="iconfont icon-bofang"></i></div>
            <div class="shipitview">
                <h4>女青年照片头像写生</h4>
                <p>视频时长<span>10:20</span></p>
            </div>
        </a>
        <a href="" class="shipinitem">
            <div class="shipinimg"><img src="" width="100%" alt=""><i class="iconfont icon-bofang"></i></div>
            <div class="shipitview">
                <h4>女青年照片头像写生</h4>
                <p>视频时长<span>10:20</span></p>
            </div>
        </a>
        <a href="" class="shipinitem">
            <div class="shipinimg"><img src="" width="100%" alt=""><i class="iconfont icon-bofang"></i></div>
            <div class="shipitview">
                <h4>女青年照片头像写生</h4>
                <p>视频时长<span>10:20</span></p>
            </div>
        </a>
    </div>
    <div class="pagination-centered">
        <ul class="pagination">
            <li class="arrow"><a href="#">&laquo;</a></li>
            <li class="current"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="arrow"><a href="#">&raquo;</a></li>
        </ul>
    </div>
</body>
</html>